<template>
    <baidu-map :center="centerPoint" :zoom="zoom" style="width: 100%; height: 100%;" @ready="mapHandler">
        <bm-marker v-if="value.lng" :position="{lng :value.lng,lat : value.lat}" :dragging="true" @dragend="dragend">
            <bm-label :content="value.lng+','+value.lat" :label-style="{color: 'red', fontSize : '12px',padding:'5px'}" :offset="{width: -55, height: 30}" />
        </bm-marker>
    </baidu-map>
</template>

<script>
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue';
import BaiduMap from 'vue-baidu-map/components/map/MapOffline.vue';

export default {
    name: 'MapPoint',
    components: {
        BaiduMap
    },
    model: {
        prop: 'value',
        event: 'change'
    },
    props: ['value', 'initCenter'],
    data() {
        return {
            zoom: 13
        };
    },
    computed: {
        centerPoint() {
            if (this.initCenter && this.initCenter.lng) {
                return this.initCenter;
            } else {
                return {lng: GlobalConfig.mapCenterLng, lat: GlobalConfig.mapCenterLat};
            }
        }
    },
    watch: {

    },
    mounted() {
    },
    methods: {
        mapHandler({BMap, map}) {
            map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
            map.addEventListener('click',  e => {
                this.$emit('change', e.point);
            });
        },
        dragend(e) {
            this.$emit('change', e.point);
        }
    }
};
</script>

<style scoped>
    .mask {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
        z-index: 11;
    }
    .common-tree {
        overflow: auto;
    }
    .tree-select {
        z-index: 111;
    }
    /deep/
    .tree-select .el-select__tags {
        flex-wrap: nowrap;
        overflow: hidden;
    }

</style>
